import {useRoutes} from 'react-router-dom'
import { useEffect } from 'react'
import {getRoutesAsync} from '@/store/modules/auth'
import { useDispatch, useSelector } from 'react-redux'
// import api from './api'
// import withLoadable from './hoc/loadable'
// import Auth from "@/component/Auth"
// const Login=withLoadable(()=>import('@/views/Login'))
// const Home=withLoadable(()=>import('@/views/Home'))

export default function App() {
  const dispatch=useDispatch()
  const routes=useSelector((state)=>{
    return state.auth.routes
  })
  // const [routes,setRoutes]=useState([
  //   {
  //     path:'/login',
  //     element:<Login/>
  //   },
  //   {
  //     path:'/',
  //     element:<Auth><Home/></Auth>
  //   }
  // ])

  //从后端获取权限列表
  // const getMenus=async()=>{
  //   let result=await api.login.getMenusApi()
  //   console.log('*******',result.data);
  //   let ary=transfromRoute(result.data)
  //   routes[1].children=ary
  //   //这里可以解决页面按F5出现白屏现象
  //   setRoutes([...routes])
  //   //setRoutes(routes)
  // }
  //将权限列表的数据转换成路由配置的格式
  // const transfromRoute=(list)=>{
  //   let ary=[]
  //   if(list&&list.length>0){
  //     list.forEach(item=>{
  //       if(item.childList&&item.childList.length>0){
  //          item.childList.forEach(subItem=>{
  //            const Modual=withLoadable(()=>import(`@/views${subItem.component}`))
  //            let routeItem={
  //             path:subItem.component,
  //             element:<Modual/>
  //            }
  //            ary.push(routeItem)
  //          })
  //       }
  //     })
  //   }
  //   return ary
  // }
  useEffect(()=>{
   dispatch(getRoutesAsync)
  },[])
  return useRoutes(routes)
}
